<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>App用户行为数据分析</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <el-button size="medium" type="primary" icon="el-icon-menu" @click="drawer = true"
               style="margin-left: 16px;margin-top:16px;position:fixed;" round></el-button>
    <el-dropdown icon="el-icon-user" @command="handleCommand" size="medium" type="primary"
                 style="margin-top:16px;right: 1em;position: fixed;padding: 0px;z-index: 99999;font-size: 16px;">
        <el-button type="primary" icon="el-icon-user" size="medium">
            {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
    <el-drawer
            title="导航栏"
            :size="size"
            :visible.sync="drawer"
            :direction='direction'
            :with-header="false">
        <el-menu
                default-active="用户趋势"
                class="el-menu-vertical-demo"
                @select="selectEvents">
            <el-menu-item-group>
                <template slot="title">用户分析</template>
                <el-menu-item index="用户趋势">
                    <i class="el-icon-grape"></i>
                    <span slot="title">用户趋势</span>
                </el-menu-item>
                <el-menu-item index="活跃用户">
                    <i class="el-icon-sugar"></i>
                    <span slot="title">活跃用户</span>
                </el-menu-item>
                <el-menu-item index="用户画像">
                    <i class="el-icon-watermelon"></i>
                    <span slot="title">用户画像</span>
                </el-menu-item>
                <el-menu-item index="地域分布">
                    <i class="el-icon-cherry"></i>
                    <span slot="title">地域分布</span>
                </el-menu-item>
                <el-menu-item index="终端分析">
                    <i class="el-icon-apple"></i>
                    <span slot="title">终端分析</span>
                </el-menu-item>
                <el-menu-item index="版本分析">
                    <i class="el-icon-pear"></i>
                    <span slot="title">版本分析</span>
                </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">事件信息</template>
                <el-menu-item index="事件分析">
                    <i class="el-icon-orange"></i>
                    <span slot="title">事件分析</span>
                </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">页面使用信息</template>
                <el-menu-item index="页面分析">
                    <i class="el-icon-coffee"></i>
                    <span slot="title">页面分析</span>
                </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">渠道信息</template>
                <el-menu-item index="渠道分析">
                    <i class="el-icon-ice-drink"></i>
                    <span slot="title">渠道分析</span>
                </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">留存信息</template>
                <el-menu-item index="留存分析">
                    <i class="el-icon-dessert"></i>
                    <span slot="title">留存分析</span>
                </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">转化信息</template>
                <el-menu-item index="转化分析">
                    <i class="el-icon-chicken"></i>
                    <span slot="title">转化分析</span>
                </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">任务管理</template>
                <el-menu-item index="任务管理">
                    <i class="el-icon-chicken"></i>
                    <span slot="title">任务管理</span>
                </el-menu-item>
            </el-menu-item-group>
        </el-menu>
    </el-drawer>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                size: '200px',
                drawer: false,
                direction: 'ltr',
            };
        },
        methods: {
            handleCommand(command) {
                if (command === "退出登录") {
                    //var that = this;
                    $.ajax({
                        type: 'get',
                        url: "http://127.0.0.1:8000/logout/",//这里是url
                        dataType: "json",
                        success: function (datat) {
                            //console.log(datat)
                            window.location.href = datat.res;
                        }
                    })
                }
            },
            selectEvents(key) {
                if (key === "用户趋势") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbyonghuqushi/", 0);
                } else if (key === "活跃用户") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbhuoyueyonghu/", 0);
                }else if (key === "用户画像") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbyonghuhuaxiang/", 0);
                } else if (key === "地域分布") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbdiyufenbu/", 0);
                } else if (key === "终端分析") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbzhongduanfenxi/", 0);
                } else if (key === "版本分析") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbbanbenfenxi/", 0);
                } else if (key === "事件分析") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbshijianfenxi/", 0);
                } else if (key === "页面分析") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbyemianfenxi/", 0);
                } else if (key === "渠道分析") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbqudaofenxi/", 0);
                } else if (key === "留存分析") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbliucunfenxi/", 0);
                } else if (key === "转化分析") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbzhuanhuafenxi/", 0);
                } else if (key === "任务管理") {
                    (document.getElementById("keshihua")).setAttribute("src", "/qbrenwuguanli/", 0);
                }
            }
        }
    })
</script>
<style>
    body {
        display: block;
        margin: 0;
    }

    .el-container {
        height: 100vh;
    }


    .el-main {
        /*background-color: #E9EEF3;*/
        color: #333;
        text-align: center;
    }
</style>
<div id="app1">
    <el-container>
        </el-aside>
        <el-main>
            <iframe id="keshihua" src="/qbyonghuqushi/" height="99%" width="100%"
                    style="border: medium none;margin:0;padding:0;"></iframe>
        </el-main>
    </el-container>
</div>
<script>
    new Vue({
        el: '#app1',
    })
</script>
</body>
</html>